<template>
  <el-dialog
    :visible.sync="dialog"
    top="30vh"
    :close-on-click-modal="false"
    destroy-on-close
    append-to-body
    title="输入玩家手机号"
    width="40%"
  >
    <!-- 搜索 -->
    <div class="head-container">
      <el-form ref="form" :model="ruleForm" :rules="rules" size="small" label-width="auto">
        <el-form-item label="选择网址" prop="jobName">
          <el-select
            v-model="ruleForm.jobName"
            placeholder="选择网址"
            clearable
            size="small"
            style="width: 100%"
          >
            <el-option
              v-for="item in enabledTypeOptions"
              :key="item.key"
              :label="item.display_name"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" prop="description">
          <el-input
            v-model="ruleForm.description"
            clearable
            size="small"
            placeholder="输入玩家手机号"
            style="width: 100%;"
          />
        </el-form-item>
      </el-form>

      <br>

      <div slot="footer" class="dialog-footer">
        <el-button @click="submitForm('form')">取 消</el-button>
        <el-button type="primary" @click="StartQuery('form')">查 询</el-button>
      </div>
    </div>
    <el-dialog width="50%" title="获取CDK" :visible.sync="interiorDialog" append-to-body>
      <el-descriptions class="margin-top" :column="1" size="10" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-platform" />
            所属网站
          </template>
          kooriookami
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user-solid" />
            用户名
          </template>
          18100000000
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-upload2" />
            所属上级
          </template>
          学校
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <svg-icon icon-class="money-red-packet" />
            红包码
          </template>
          bhrfgbhbfsdkfhbnsdfhbnsd
          <el-tooltip class="item" effect="dark" content="复制红包码" placement="top-start">
            <i class="el-icon-document-copy cp" @click="handleClipboard('bhrfgbhbfsdkfhbnsdfhbnsd',$event)" />
          </el-tooltip>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <svg-icon icon-class="redmoney" />
            红包金额
          </template>
          66
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="interiorDialog = false">继续查询</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import clipboard from '@/utils/clipboard'
import crud from '@/mixins/crud'

export default {
  name: 'GetCdk',
  mixins: [crud],
  data() {
    return {
      title: '输入玩家手机号',
      interiorDialog: false,
      //  网站列表
      enabledTypeOptions: [
        { key: 'true', display_name: '成功' },
        { key: 'false', display_name: '失败' }
      ],
      ruleForm: {
        jobName: undefined,
        description: undefined
      },
      rules: {
        jobName: [
          { required: true, message: '请选择网站', trigger: 'change' }
        ],
        description: [
          { required: true, message: '请输入玩家手机号', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    doInit() {
      this.$nextTick(() => {
        // crud.resetForm
      })
    },
    // 获取接口
    StartQuery(formName) {
      //   crud.resetQuery()
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('this.form: ', this.form)
          this.interiorDialog = true
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 重置表单
    submitForm(formName) {
      this.$refs[formName].resetFields()
      this.dialog = false
    },
    // 复制
    handleClipboard(text, event) {
      clipboard(text, event)
    }

  }
}
</script>

<style scoped>

::v-deep .el-dialog__body {
    padding: 0 20px 10px 20px !important;
}
</style>

